<template>
  <div class="main-container bg-cover bg-no-repeat px-[25px] flex flex-col justify-center h-[200px]">
    <div class="flex flex-col justify-center items-center pb-5">
      <img src="@/assets/logo.png" class="h-[64px] w-[64px] rounded-full" />
      <div class="flex flex-col items-center text-[#fff]">
        <h1 class="text-2xl mt-3">{{userInfo.username}}</h1>
        <p class="text-sm mt-1">{{userInfo.phone}}</p>
      </div>
    </div>
  </div>
  <div class="px-[15px] -mt-5">
    <Links :userInfo="userInfo" />
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import Links from './components/Links.vue'
import { useUserStore } from '@/store/user'

export default defineComponent({
  components: { Links },
  name: 'Main',
  setup() {
    const store = useUserStore()
    const userInfo = computed(() => store.userInfo)

    return {
      userInfo
    }
  }
})
</script>
<style lang="scss" scoped>
.main-container{
  background-image: url('../../assets/bg.png')
}
</style>
